<template>
	<view @tap="jumpDetail(data)">
		<view
			class="flex-between"
			style="margin-bottom: -10rpx"
			v-if="[1, 2, 4].includes(active)"
		>
			<view v-if="active === 4 && !data.isRead" class="is-read"></view>
			<view class="data-title text-over">{{
				`${data.owner.name || data.staterUser.name}提交的${
					data.processDefName
				}`
			}}</view>
			<view class="data-time">{{
				filterDate(data.createTime || data.startTime)
			}}</view>
		</view>
		<view v-if="active == 3" class="flex-between">
			<avatar :name="name"></avatar>
			<view class="data-title text-over ml10">{{
				`${data.owner.name || data.staterUser.name}提交的${
					data.processDefName
				}`
			}}</view>
			<view class="data-time">{{
				filterDate(data.createTime || data.startTime)
			}}</view>
		</view>
		<form-design :data="data"></form-design>
		<view
			class="flex-between"
			style="margin-top: -5rpx"
			v-if="[1, 2, 4].includes(active)"
		>
			<view class="df ac f28">
				<avatar :name="name"></avatar>
				<view class="ml10 data-name">{{
					data.owner.name || data.staterUser.name
				}}</view>
			</view>
			<view
				class="data-status"
				:style="'color:' + dealtStatus(data).color"
				>{{ dealtStatus(data).text }}</view
			>
		</view>
		<view v-if="active == 3">
			<view
				class="data-status"
				:style="'color:' + dealtStatus(data).color"
				>{{ dealtStatus(data).text }}</view
			>
		</view>
	</view>
</template>
<script>
import avatar from '@/components/avatar/avatar.vue'
import formDesign from '@/subPackagesIndex/components/approve-item/formDesign/formDesign.vue'
import getDateFn from '@/common/getDateFn.js'
import { getTargetDay } from '@/common/utils.js'
export default {
	components: {
		avatar,
		formDesign,
	},
	props: {
		data: Object,
		active: Number,
	},
	computed: {
		name() {
			const ownerName = this.data.owner.name
			return ownerName.length > 2 ? ownerName.slice(1) : ownerName
		},
		loginUser() {
			return uni.getStorageSync('loginUser')
		},
	},
	methods: {
		filterDate(val) {
			let str = ''
			const today = getDateFn.getDate()
			const yesterday = getTargetDay(-1)
			const day = val.slice(0, 10)
			if (day === today) {
				str = val.slice(11, 16)
			} else if (day === yesterday) {
				str = '昨天'
			} else {
				str = val.slice(0, 16)
			}
			return str
		},
		//根据退回进行分段拆解
		splitByRecall(progress) {
			//提取分段时间点
			let points = progress
				.filter((p) => p.result === 'recall')
				.map((p) => new Date(p.startTime).getTime())
			if (points.length > 0) {
				let blocks = [] //分段流程块组
				let pointer = 0 //定点索引
				points.push(new Date().getTime())
				points.forEach((point) => {
					let block = []
					for (let i = pointer; i < progress.length; i++) {
						let startTime = new Date(
							progress[i].startTime
						).getTime()
						if (startTime <= point) {
							block.push(progress[i])
						} else {
							pointer = i
							break
						}
					}
					//存段
					blocks.push(block)
				})
				//按段处理
				let processNodes = []
				blocks.forEach((block) =>
					processNodes.push(...this.mergeTask(block))
				)
				return processNodes
			}
			return this.mergeTask(progress)
		},
		//合并活动节点，此处执行一段合并算法用来处理退回导致节点重合的问题
		mergeTask(progress) {
			let merge = []
			progress.forEach((pg) => {
				let i = merge.findIndex((n) => n.nodeId === pg.nodeId)
				if (i > -1) {
					//存在则合并到对象
					if (merge[i].users) {
						//已经合并过了
						merge[i].finishTime = pg.finishTime
						merge[i].users.push(pg)
						merge[i].result = this.getApprovalResult(
							merge[i],
							pg,
							pg.approvalMode
						)
						merge[i].comment = merge[i].comment.concat(pg.comment)
					} else {
						//没有就合并
						merge[i] = {
							agree: null,
							name: pg.name,
							nodeType: pg.nodeType,
							approvalMode: pg.approvalMode,
							nodeId: pg.nodeId,
							result: this.getApprovalResult(
								merge[i],
								pg,
								pg.approvalMode
							),
							startTime: merge[i].startTime,
							finishTime: pg.finishTime,
							comment: merge[i].comment.concat(pg.comment),
							users: [merge[i], pg],
						}
						// merge[i].comment = merge[i].comment.sort((a, b) => moment(a.createTime) - moment(b.createTime))
					}
				} else {
					merge.push(pg)
				}
			})
			return merge
		},
		haveRaed(instanceId) {
			this.$request.request(
				'wflow/wflow/smallProgram/process/task/haveRead',
				{
					data: {
						instanceId,
						userId: this.loginUser.id,
					},
				}
			)
		},
		jumpDetail(value) {
			this.haveRaed(value.instanceId)
			uni.navigateTo({
				url: `/subPackagesIndex/pages/index/approval/mainSub/approvalDetail?instanceId=${
					value.instanceId ? value.instanceId : undefined
				}&nodeId=${value.nodeId ? value.nodeId : undefined}&type=${
					this.active
				}&formId=${value.formId ? value.formId : undefined}`,
			})
		},
		dealtStatus(item) {
			const type = this.active
			// if (type === 2) {
			// 	switch (item.taskResult) {
			// 		case 'agree':
			// 			return { text: '审批通过', color: '#81B337' }
			// 		case 'refuse':
			// 			return { text: '审批拒绝', color: '#FF1717' }
			// 		case 'recall':
			// 			return { text: '已退回', color: '#666' }
			// 		case 'transfer':
			// 			return { text: '已转交', color: '#1989fa' }
			// 		default:
			// 			return ''
			// 	}
			// }
			if ([2, 3, 4].includes(type)) {
				if (item.status === 'RUNNING') {
					const nodeList = item.assigneeList
					return {
						text: `${
							nodeList && nodeList.length === 1
								? nodeList[0].name
								: `${nodeList[0].name}等${nodeList.length}人`
						}处理中`,
						color: '#E99D42',
					}
				} else if (item.result === 'refuse-end') {
					return {
						text: '审批拒绝',
						color: '#FF1717',
					}
				} else if (item.result === 'cancel-end') {
					return {
						text: '已撤销',
						color: '#9A9A9A',
					}
				} else if (item.result === 'cancel-refuse-end') {
					return {
						text: '审批通过（撤销被拒绝）',
						color: '#81B337',
					}
				} else {
					return {
						text: '审批通过',
						color: '#81B337',
					}
				}
			} else if (type === 1) {
				return {
					text: `${this.loginUser.name}处理中`,
					color: '#E99D42',
				}
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.data-title {
	color: rgba(16, 16, 16, 1);
	font-size: 36rpx;
	font-weight: 700;
	flex: 1;
	margin-right: 50rpx;
}
.data-time {
	color: #9a9a9a;
	font-size: 28rpx;
	width: fit-content;
}
.data-name {
	color: #9a9a9a;
}
.data-status {
	font-size: 28rpx;
}
.is-read {
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background: #ff1717;
	margin-right: 5rpx;
}
</style>
